<template>
  <div class="add">
    <el-card class="add-container">
      <el-form :model="roleForm" :rules="rules" ref="goodRef" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input style="width: 300px" v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input style="width: 300px" type="textarea" v-model="roleForm.description" placeholder="请输入角色简介"></el-input>
        </el-form-item>
        <el-form-item label="权限列表" prop="permissionList">
          <el-checkbox-group v-model="roleForm.permissionList">
            <el-checkbox :label="permission.id" v-for="permission in permissionList" :key="permission.id">{{permission.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api/api'
export default {
  name: 'AddGood',
  setup() {
    const editor = ref(null)
    const goodRef = ref(null)
    const route = useRoute()
    const router = useRouter()
    console.log(route.query)
    const role = route.query
    const state = reactive({
      uploadServer: api.file.upload,
      id: role.id || null,
      defaultCate: '',
      roleForm: {
        name: role.name || '',
        description: role.description || '',
        permissionList: []
      },
      permissionList: [],
      rules: {
        name: [
          { required: 'true', message: '请填写角色名称', trigger: ['change'] }
        ],
        description: [
          {required: 'true', message: '请填写角色描述信息', trigger: ['change'] }
        ],
        permissionList: [
          { required: 'true', message: '请选择至少一个权限', trigger: ['change'] }
        ]
      },
    })
    onMounted(() => {
      getPermissionList()
    })

    const getPermissionList = () => {
      let pageInfo = {
        pageNumber: 1,
        pageSize: 1000,
        keyword: null
      }
      state.loading = true
      axios.post(api.permission.list, pageInfo).then(res => {
        let pageInfo = res.data.data
        state.permissionList = pageInfo.data
        
      })
    }

    const submitAdd = () => {
      goodRef.value.validate((vaild) => {
        if (vaild) {
          // 默认新增用 post 方法
          let params = {
            description: state.roleForm.description,
            name: state.roleForm.name,
            permissionIds: state.roleForm.permissionList
          }
          let url
          if (state.id ) {
            params.id = state.id;
            params.createTime = role.createTime;
            params.updateTime = role.updateTime;
            url = api.role.modify
          } else {
            url = api.role.add
          }
          axios.post(url, params).then(() => {
            ElMessage.success(state.id ? '修改成功' : '添加成功')
            router.push({ path: '/role' })
          })
        }
      })
    }
    const handleBeforeUpload = (file) => {
      const isJPG = ['image/jpg', 'image/jpeg', 'image/png'].includes(file.type) ;

      const isLt2M = file.size / 1024 / 1024 < 10;

      if ( !isJPG ) {
        ElMessage.error('上传头像图片只能是 jpg、jpeg、png 格式!');
      }
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    }
    const handleUrlSuccess = (val) => {
      state.roleForm.pictureUrl = val.data || ''
    }
    return {
      ...toRefs(state),
      goodRef,
      submitAdd,
      handleBeforeUpload,
      handleUrlSuccess,
      editor,
    }
  }
}
</script>

<style scoped>
  .add {
    display: flex;
  }
  .add-container {
    flex: 1;
    height: 100%;
  }
  .avatar-uploader {
    width: 100px;
    height: 100px;
    color: #ddd;
    font-size: 30px;
  }
  .avatar-uploader-icon {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #e9e9e9;
    padding: 32px 17px;
  }
</style>